<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点A现B</title>
</head>
<body>
  <!-- 顶层 -->
  <section style="pointer-events:none;height:0;transform:scale(1);">
    <svg style="background-image:url('./images/640\ \(1\).jpg');background-repeat: no-repeat;background-size: 100%;display: inline-block;"
      viewBox="0 0 600 396">
      <g transform="translate(300 150)">
        <circle x="0" y="0" cx="0" cy="0" r="8" stroke-width="3" style="stroke: #fff"></circle>
        <circle x="0" y="0" cx="0" cy="0" r="2" style="fill: #fff"></circle>
        <animate attributeName="opacity" values="0.2;1;0.2" fill="freeze" repeatCount="indefinite" dur="2s"></animate>
        <animateTransform attributeName="transform" type="scale" values="1 1;1.2 1.2;1 1" repeatCount="indefinite" dur="1s" additive="sum"></animateTransform>
      </g>
    </svg>
  </section>
  <!-- 底层 -->
  <section style="line-height: 0;">
    <img src="./images/640.jpg" alt="" style="widith: 100%;display: inline-block;">
  </section>
  <section style="opacity: 0;height: 0;"></section>
</body>
</html>